<!--挂机短信管理-->
<template>
  <div class="hangUpSms">
    <div class="notice_container">
      {{$t('configLazyLoad.sms.smsTips')}}：<br/>
      {{$t('configLazyLoad.sms.smsTips1')}}<br/>
      {{$t('configLazyLoad.sms.smsTips2')}}<br/>
      {{$t('configLazyLoad.sms.smsTips3')}}
    </div>
    <el-checkbox class="item" v-model="call_in">{{$t('public.callIn')}}</el-checkbox>
    <div class="item">
      <el-radio-group v-model="choose_service">
        <el-radio label="all">{{$t('configLazyLoad.sms.allNum')}}</el-radio>
        <el-radio label="single">{{$t('configLazyLoad.sms.someNum')}}</el-radio>
      </el-radio-group>
      <span class="icon-text" @click.stop="refresh"><i class="iconfont icon-shuaxin"></i>{{$t('public.refresh')}}</span>
    </div>
    <!--所有号  start==========================-->
    <el-row :gutter="20" class="item" v-show="choose_service === 'all'">
      <el-col :span="6">
        <div class="">{{$t('configLazyLoad.sms.inTemp')}}</div>
        <div class="itemCallIn">
          <el-select size="mini" v-model="call_in_template" :placeholder="$t('public.pleasePick')">
            <el-option
              v-for="item in smsTemplateArr"
              class="sms-mass-select-option"
              :label="item.name + ' (' + item.content + ')'"
              :title="item.content"
              :value="item._id">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="">{{$t('configLazyLoad.sms.inScope')}}</div>
        <div class="itemCallIn">
          <el-select multiple filterable size="mini" v-model="call_in_status" :placeholder="$t('public.pleasePick')">
            <!--<el-option-->
              <!--label="全部"-->
              <!--value="">-->
            <!--</el-option>-->
            <el-option
              v-for="item in callStatusArr"
              :label="item.code_name"
              :value="item.code_value">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="9">
        <div class="">{{$t('sms.sendTime')}}</div>
        <div class="itemCallIn">
          <el-time-picker
            id="123"
            size="mini"
            is-range
            :editable=false
            :clearable=false
            v-model="date"
            :placeholder="$t('public.timeRanges')">
          </el-time-picker>
        </div>
      </el-col>
    </el-row>
    <!--指定号  start==========================-->
    <el-row :gutter="20" class="item" v-show="choose_service === 'single'">
      <el-col :span="4">
        <div class="">{{$t('monitor.serviceNum')}}</div>
      </el-col>
      <el-col :span="6">
        <div class="">{{$t('configLazyLoad.sms.inTemp')}}</div>
      </el-col>
      <el-col :span="4">
        <div class="">{{$t('configLazyLoad.sms.inScope')}}</div>
      </el-col>
      <el-col :span="9">
        <div class="">{{$t('sms.sendTime')}}</div>
      </el-col>
      <el-col :span="1">
        <div class=""><i class="el-icon-plus" @click="plusItem"></i></div>
      </el-col>
    </el-row>
    <div v-show="choose_service === 'single'">
      <el-row :gutter="20" class="item" v-for="(item, index) in templates">
        <el-col :span="4">
          <div class="itemCallIn">
            <div v-if="serviceIndex !== index" @click="serviceIndexClick(index)" class="ser-wrap">
              <span style="display:block;overflow:hidden;">{{templates[index].service_num[0]}}...</span>
              <i class="el-icon-arrow-down"></i>
            </div>
            <el-select v-else size="mini" multiple filterable ref="serviceSelectDom" v-model="templates[index].service_num" :placeholder="$t('public.pleasePick')">
              <el-option
                v-for="item in serviceNoArr"
                :label="item.Exten"
                :value="item.Exten">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="itemCallIn">
            <el-select size="mini" v-model="templates[index].call_in_template" :placeholder="$t('public.pleasePick')">
              <el-option
                v-for="item in smsTemplateArr"
                class="sms-mass-select-option"
                :label="item.name + ' (' + item.content + ')'"
                :title="item.content"
                :value="item._id">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="itemCallIn">
            <el-select multiple filterable size="mini" v-model="templates[index].call_in_status" :placeholder="$t('public.pleasePick')">
              <el-option
                v-for="item in callStatusArr"
                :label="item.code_name"
                :value="item.code_value">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="9">
          <div class="itemCallIn">
            <el-time-picker
              id="index"
              size="mini"
              is-range
              :editable=false
              :clearable=false
              v-model="templates[index].date"
              :placeholder="$t('public.timeRanges')">
            </el-time-picker>
          </div>
        </el-col>
        <el-col :span="1">
          <div class="itemCallIn"><i class="el-icon-minus" @click="delItem(index)"></i></div>
        </el-col>
      </el-row>
    </div>
    <!--指定号 end=====================-->
    <!-- 呼出配置   ================== -->
    <el-checkbox class="item" style="margin-top: 40px" v-model="call_out">{{$t('public.callOut')}}</el-checkbox>
    <div class="item">
      <el-radio-group v-model="call_out_choose_service">
        <el-radio label="all">{{$t('configLazyLoad.sms.allNum')}}</el-radio>
        <el-radio label="single">{{$t('configLazyLoad.sms.someNum')}}</el-radio>
      </el-radio-group>
      <span class="icon-text" @click.stop="refresh"><i class="iconfont icon-shuaxin"></i>{{$t('public.refresh')}}</span>
    </div>

    <!--所有号  start==========================-->
    <el-row :gutter="20" class="item" v-show="call_out_choose_service === 'all'">
      <el-col :span="6">
        <div class="">{{$t('configLazyLoad.sms.outTemp')}}</div>
        <div class="itemCallIn">
          <el-select size="mini" v-model="call_out_template" :placeholder="$t('public.pleasePick')">
            <el-option
              v-for="item in smsTemplateArr"
              class="sms-mass-select-option"
              :label="item.name + ' (' + item.content + ')'"
              :title="item.content"
              :value="item._id">
            </el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="">{{$t('configLazyLoad.sms.outScope')}}</div>
        <div class="itemCallIn">
          <el-select multiple filterable size="mini" v-model="call_out_status" :placeholder="$t('public.pleasePick')">
            <!--<el-option-->
              <!--label="全部"-->
              <!--value="">-->
            <!--</el-option>-->
            <el-option
              v-for="item in callOutStatus"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
    <!--指定号  start==========================-->
    <el-row :gutter="20" class="item" v-show="call_out_choose_service === 'single'">
      <el-col :span="4">
        <div class="">{{$t('monitor.serviceNum')}}</div>
      </el-col>
      <el-col :span="6">
        <div class="">短信模板</div>
      </el-col>
      <el-col :span="4">
        <div class="">呼出短信适用范围</div>
      </el-col>
      <el-col :span="1">
        <div class=""><i class="el-icon-plus" @click="plusItemCallOut"></i></div>
      </el-col>
    </el-row>
    <div v-show="call_out_choose_service === 'single'">
      <el-row :gutter="20" class="item" v-for="(item, index) in call_out_templates">
        <el-col :span="4">
          <div class="itemCallIn">
            <div v-if="serviceIndexCallOut !== index" @click="callOutServiceIndexClick(index)" class="ser-wrap">
              <span style="display:block;overflow:hidden;">{{call_out_templates[index].service_num[0]}}...</span>
              <i class="el-icon-arrow-down"></i>
            </div>
            <el-select v-else size="mini" multiple filterable ref="serviceSelectDomCallOut" v-model="call_out_templates[index].service_num" :placeholder="$t('public.pleasePick')">
              <el-option
                v-for="item in serviceNoArr"
                :label="item.Exten"
                :value="item.Exten">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="itemCallIn">
            <el-select size="mini" v-model="call_out_templates[index].call_out_template" :placeholder="$t('public.pleasePick')">
              <el-option
                v-for="item in smsTemplateArr"
                class="sms-mass-select-option"
                :label="item.name + ' (' + item.content + ')'"
                :title="item.content"
                :value="item._id">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="itemCallIn">
            <el-select multiple filterable size="mini" v-model="call_out_templates[index].call_out_status" :placeholder="$t('public.pleasePick')">
              <el-option
                v-for="item in callOutStatus"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="1">
          <div class="itemCallIn"><i class="el-icon-minus" @click="delItemCallOut(index)"></i></div>
        </el-col>
      </el-row>
    </div>
    <!--指定号 end=====================-->
    <el-button type="primary" class="primary_btn item" @click="submit">{{$t('public.save')}}</el-button>
  </div>
</template>
<script>
  import {getFormatDateTime, deepClone} from '@/utils/m7Utils.js'
  export default {
    name: 'hangUpSms',
    data () {
      return {
        callOutStatus: [
          // {label: this.$t('public.all'), value: ''},
          {label: this.$t('customer.contactHistoryDisposeDisplay.notDeal'), value: 'notDeal'},
          {label: this.$t('customer.contactHistoryDisposeDisplay.dealing'), value: 'dealing'},
          {label: 'IVR', value: 'leak'},
          {label: '黑名单', value: 'blackList'},
          {label: '并发限制', value: 'limit'}
        ],
        smsTemplateArr: [],
        serviceNoArr: [],
        serviceIndex: 0, //  服务号过多，elem select卡顿  用span先展示
        serviceIndexCallOut: 0, 
        callStatusArr: [],
        templates: [{
          service_num: [],
          call_in_template: '',
          call_in_status: [],
          date: [new Date(2017, 9, 10), new Date(2017, 9, 10, 23, 59, 59)]
        }],
        call_out_templates: [{
          service_num: [],
          call_out_template: '',
          call_out_status: []
        }],
        choose_service: 'all',
        call_out_choose_service: 'all',
        call_in: false,
        call_out: false,
        call_out_template: '',
        call_in_template: '',
        call_in_status: [],
        call_out_status: [],
        date: [new Date(2017, 9, 10), new Date(2017, 9, 10, 23, 59, 59)]
      }
    },
    methods: {
      //  服务号过多，elem select卡顿  用span先展示
      serviceIndexClick (val) {
        this.serviceIndex = val
        this.$nextTick(() => {
          if (this.$refs.serviceSelectDom) {
            this.$refs.serviceSelectDom[0].$el.querySelector('.el-input__icon').click((event) => {
              event.stopPropagation()
              return false
            })
          }
        })
      },
      callOutServiceIndexClick (val) {
        this.serviceIndexCallOut = val
        this.$nextTick(() => {
          if (this.$refs.serviceSelectDomCallOut) {
            this.$refs.serviceSelectDomCallOut[0].$el.querySelector('.el-input__icon').click((event) => {
              event.stopPropagation()
              return false
            })
          }
        })
      },
      plusItem () {
        let item = {
          service_num: [],
          call_in_template: this.smsTemplateArr[0]._id,
          call_in_status: [],
          date: [new Date(2017, 9, 10), new Date(2017, 9, 10, 23, 59, 59)]
        }
        this.templates.push(item)
      },
      delItem (index) {
        this.templates.splice(index, 1)
      },
      plusItemCallOut () {
        let item = {
          service_num: [],
          call_out_template: this.smsTemplateArr[0]._id,
          call_out_status: []
        }
        this.call_out_templates.push(item)
      },
      delItemCallOut (index) {
        this.call_out_templates.splice(index, 1)
      },
      refresh () {
        this.$store.dispatch('queryHangupMessageTemplate', {idleidle: ''}).then(res => {
          if (res && res.success && res.doc) {
            let doc = res.doc
            this.call_out = doc.call_out
            this.call_in = doc.call_in
            this.call_out_template = doc.call_out_template
            this.call_out_status = doc.call_out_status.split(',') || []
            this.choose_service = doc.choose_service
            this.call_out_choose_service = doc.call_out_choose_service || 'all'    //  呼出配置 指定号 或 所有号
            this.call_in_template = doc.call_in_template
            this.call_in_status = doc.call_in_status ? doc.call_in_status.split(',') : []
            if (doc.call_in_begintime && doc.call_in_endtime) {
              let beginH = doc.call_in_begintime.substr(0, 2)
              let beginM = doc.call_in_begintime.substr(3, 2)
              let beginS = doc.call_in_begintime.substr(6, 2)
              let endH = doc.call_in_endtime.substr(0, 2)
              let endM = doc.call_in_endtime.substr(3, 2)
              let endS = doc.call_in_endtime.substr(6, 2)
              this.date = [new Date(2017, 9, 10, beginH, beginM, beginS), new Date(2017, 9, 10, endH, endM, endS)]
            } else {
              this.date = []
            }
            let templatesData = []
            doc.templates.forEach(item => {
              let temp = {
                service_num: item.service_num ? item.service_num.split(',') : [],
                call_in_template: item.call_in_template,
                call_in_status: item.call_in_status ? item.call_in_status.split(',') : [],
              }
              if (item.call_in_begintime && item.call_in_endtime) {
                let beginH = item.call_in_begintime.substr(0, 2)
                let beginM = item.call_in_begintime.substr(3, 2)
                let beginS = item.call_in_begintime.substr(6, 2)
                let endH = item.call_in_endtime.substr(0, 2)
                let endM = item.call_in_endtime.substr(3, 2)
                let endS = item.call_in_endtime.substr(6, 2)
                temp.date = [new Date(2017, 9, 10, beginH, beginM, beginS), new Date(2017, 9, 10, endH, endM, endS)]
              } else {
                temp.date = []
              }
              templatesData.push(temp)
            })
            this.templates = templatesData

            if (doc.call_out_templates) {
              let call_out_templatesData = []
              doc.call_out_templates.forEach(item => {
                let itemp = {
                  service_num: item.service_num ? item.service_num.split(',') : [],
                  call_out_template: item.call_out_template,
                  call_out_status: item.call_out_status ? item.call_out_status.split(',') : [],
                }
                call_out_templatesData.push(itemp)
              })
              this.call_out_templates = call_out_templatesData
            } else {
              this.call_out_templates = [{
                service_num: [],
                call_out_template: '',
                call_out_status: []
              }]
            }

            let smsTemIdArr = []  //  短信模板id的数组
            let flag = false
            this.smsTemplateArr.forEach(item => {
              smsTemIdArr.push(item._id)
            })
            if (smsTemIdArr.indexOf(this.call_out_template) === -1) {
              this.call_out_template = this.$t('configLazyLoad.sms.error1')
              flag = true
            }
            if (smsTemIdArr.indexOf(this.call_in_template) === -1) {
              this.call_in_template = this.$t('configLazyLoad.sms.error1')
              flag = true
            }
            if (this.choose_service === 'single' && this.call_in) { // 勾选了呼入，和指定号之后，再校验
              this.templates.forEach(one => {
                if (smsTemIdArr.indexOf(one.call_in_template) === -1) {
                  one.call_in_template = this.$t('configLazyLoad.sms.error1')
                  flag = true
                }
              })
            }
            if (this.call_out_choose_service === 'single' && this.call_out) { // 勾选了呼出，和指定号之后，再校验
              this.call_out_templates.forEach(one => {
                if (smsTemIdArr.indexOf(one.call_out_template) === -1) {
                  one.call_out_template = this.$t('configLazyLoad.sms.error1')
                  flag = true
                }
              })
            }
            if (flag) {
              this.$message.error(this.$t('configLazyLoad.sms.error2'))
            }
          }
        })
      },
      submit () {
        let data = {}
        data.call_out = this.call_out
        data.call_out_template = this.call_out_template
        data.call_out_status = this.call_out_status.join(',') || ''
        data.call_in = this.call_in
        data.choose_service = this.choose_service
        data.call_out_choose_service = this.call_out_choose_service
        data.call_in_template = this.call_in_template
        data.call_in_status = this.call_in_status.join(',') || ''
        if (this.date) {
          if (this.date[0]) {
            data.call_in_begintime = getFormatDateTime(this.date[0]).substr(11, 8)
          }
          if (this.date[1]) {
            data.call_in_endtime = getFormatDateTime(this.date[1]).substr(11, 8)
          }
        }
        if (this.choose_service === 'single' && data.call_in) {
          for (let i = 0; i < this.templates.length; i++) {
            if (!this.templates[i].date) {
              this.$message.error(this.$t('configLazyLoad.sms.validate1'))
              return
            }
            if (this.templates[i].call_in_status.length === 0) {
              this.$message.error(this.$t('configLazyLoad.sms.validate2'))
              return
            }
            if (this.templates[i].service_num.length === 0) {
              this.$message.error(this.$t('configLazyLoad.sms.validate3'))
              return
            }
          }
        }
        if (this.call_out_choose_service === 'single' && data.call_out) {
          for (let i = 0; i < this.call_out_templates.length; i++) {
            if (this.call_out_templates[i].call_out_status.length === 0) {
              this.$message.error(this.$t('configLazyLoad.sms.validate2'))
              return
            }
            if (this.call_out_templates[i].service_num.length === 0) {
              this.$message.error(this.$t('configLazyLoad.sms.validate3'))
              return
            }
          }
        }
        if (this.call_out_choose_service === 'all' && data.call_out) {
          if (!data.call_out_status) {
            this.$message.error(this.$t('configLazyLoad.sms.validate5'))
            return
          }
        }
        if (this.choose_service === 'all' && data.call_in) {
          if (!this.date) {
            this.$message.error(this.$t('configLazyLoad.sms.validate4'))
            return
          }
          if (!data.call_in_status) {
            this.$message.error(this.$t('configLazyLoad.sms.validate5'))
            return
          }
        }
        if ((this.call_out_template === this.$t('configLazyLoad.sms.error1') && data.call_out) || (this.call_in_template === this.$t('configLazyLoad.sms.error1') && data.call_in)) {
          this.$message.error(this.$t('configLazyLoad.sms.error1'))
          return
        }
        data.templates = deepClone(this.templates)
        data.templates.forEach(item => {
          if (item.date) {
            if (item.date[0]) {
              item.call_in_begintime = getFormatDateTime(item.date[0]).substr(11, 8)
            }
            if (item.date[1]) {
              item.call_in_endtime = getFormatDateTime(item.date[1]).substr(11, 8)
            }
          }
          item.call_in_status = item.call_in_status.join(',') || ''
          item.service_num = item.service_num.join(',') || ''
        })
        data.call_out_templates = deepClone(this.call_out_templates)
        data.call_out_templates.forEach(item => {
          item.call_out_status = item.call_out_status.join(',') || ''
          item.service_num = item.service_num.join(',') || ''
        })
        console.log(data)
        this.$store.dispatch('saveCallMessageTemplate', data).then(res => {
          if (res.success) {
            this.$message.success(this.$t('configLazyLoad.sms.validate6'))
          }
        })
      }
    },
    beforeMount () {
      let p1 = this.$store.dispatch('getCache', {type: 'callStatus'})
      let p2 = this.$store.dispatch('getCache', {type: 'smsTemplate'})
      let p3 = this.$store.dispatch('getCache', {type: 'serviceNo'})
      Promise.all([p1, p2, p3]).then(([callStatus, smsTemplate, serviceNo]) => {
        this.callStatusArr = callStatus
        this.smsTemplateArr = smsTemplate.filter((item) => item.type !== 'flow') 
        // type： flow => 短信模板报备的时候，会选择应用场景， 如果选择了工单模板，就会被过滤掉
        this.serviceNoArr = serviceNo
//        this.templates[0].service_num = [this.serviceNoArr[0].Exten]
        if (this.smsTemplateArr.length > 0) {
          this.call_out_template = this.smsTemplateArr[0]._id
          this.call_in_template = this.smsTemplateArr[0]._id
          this.templates[0].call_in_template = this.smsTemplateArr[0]._id
          this.call_out_templates[0].call_out_template = this.smsTemplateArr[0]._id
        }
        this.refresh()
      })
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../assets/common.styl"
  .hangUpSms
    padding 20px
    .el-row
      padding 20px
      border-radius 4px
      background-color $c-back
      .el-select,.el-date-editor
        width 100%
    .notice_container
      color $c-prompt
      line-height 28px
    .itemCallIn
      /*height 30px*/
      margin-top 20px
    .item
      margin-top 10px
      .icon-text
        margin-left 40px
        cursor pointer
        line-height 30px
        .icon-shuaxin
          margin-right 4px
      .callOutItem
        display inline-block
        margin-right 20px
        .callOutTem
          width 300px
      .el-icon-plus,.icon-shuaxin
        color $c-main
        cursor pointer
      .el-icon-minus
        color $c-pink
        cursor pointer
  .sms-mass-select-option
    max-width 300px
    height auto
    word-wrap break-word
    white-space normal
    line-height 20px
    padding 10px 20px
  .ser-wrap
    background-color #fff
    height 30px
    line-height 30px
    cursor pointer
    border 1px solid #dcdfe6
    border-radius 4px
    box-sizing border-box
    padding 0 30px 0 10px
    position relative
    .el-icon-arrow-down
      position absolute
      top 8px
      right 10px
      color #c0c4cc
      font-size 14px
</style>
